<template>
  <div class="main">
    <mavon-editor style="height: 580px; width: 1200px; z-index:1;border: 1px solid #d9d9d9; " v-model="blog.content"/>
    <div>
      <a-button style="float: right; margin-right: 16px; margin-top: 10px; " type="primary" @click="showDrawer">发布文章</a-button>
      <a-drawer
        width="100px"
        title="发布文章"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <a-form :form="form" v-model="blog" layout="vertical" hide-required-mark>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item property="title" label="文章标题">
                <a-input
                  v-model="blog.title"
                  style="width: 200px;"
                  placeholder="Please enter user name"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12" >
              <a-form-item property="category" label="文章分类">

                <a-select placeholder="请选择分类" v-model="blog.category" style="width: 200px">

                    <a-select-option property="category" v-for="(c, index) in category" :label="c.name" :value="c">
                      {{ c.name }}
                    </a-select-option>

                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item property="tags" label="文章标签">
                <a-select
                  property="tags"
                  v-model="blog.tags"
                  mode="multiple"
                  placeholder="请选择标签"

                  style="width: 300px">
                    <a-select-option property="tags" v-for="(t, index) in tags" :label="t.name" :value="t" :key="t.id">
                      {{ t.name }}
                    </a-select-option>

                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item property="cover" label="文章封面上传">
                <a-upload
                  v-model="blog.cover"
                  name="file"
                  accept="image/*"
                  list-type="picture"
                  @change="change"
                  multiple="false"
                  action="http://localhost:82/oss/file/upload"
                >
<!--                  action="https://inf-files.oss-cn-beijing.aliyuncs.com"-->
                  <a-button style="margin-top: 28px; "> <a-icon type="upload" /> 上传封面图片 </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose">
            Cancel
          </a-button>
          <a-button type="primary" @click="saveOrUpdate">
            Publish
          </a-button>
        </div>
      </a-drawer>
    </div>

  </div>
</template>

<script>
import category from "@/api/category";
import tag from '@/api/tag';
import blog from "@/api/blog";
import skill from "@/api/skill";
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      category: [],
      tags: [],
      blog: {},
      blogId: '',
    };
  },
  created() {

    if (this.$route.params && this.$route.params.id) {
      this.blogId = this.$route.params.id;
      this.getBlogEditInfo();
    }

    this.getCategoryEntityData();
    this.getTagEntityData();
  },
  methods: {
    getBlogEditInfo() {
      blog.getBlogInfoById(this.blogId).then(responses => {
        this.blog = responses.data.blogInfo;
        console.log(responses.data.blogInfo)
      })
    },
    change(data) {
      this.blog.cover = data.file.response.data.url;
      console.log("图片地址：", data.file.response.data.url);
      console.log("data：", data);
    },
    saveOrUpdate() {
      blog.saveOrUpdateBlog(this.blog).then(response => {
        if (!this.blog.id) {
          this.$message.success(
            '发布成功',
            3,
          );
        } else {
          this.$message.success(
            'modified',
            3,
          );
        }

        this.$router.push({path: `/blog/list`})
      })
    },
    getCategoryEntityData() {
      category.getCategories().then(response => {

       let category = this.category = response.data.categories;
        console.log('分类：', category);
      })
    },
    getTagEntityData() {
      tag.getTags().then(response => {
        this.tags = response.data.tags;
        console.log('tags：', response.data.tags)
      })
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};

</script>

<style scoped>

</style>